<template>
  <div>
    <!-- <h1>hello vue</h1> -->
    <div>
      <!-- 
        router-link生成的两个类名的区别
          router-link-exact-active: 表示精确匹配，url中的hash值路径，跟href属性值完全相同的时候，添加此类名
          router-link-active: 表示模糊匹配，当url中的hash值路径，包含href属性值的时候，添加此类名
        使用场景：
          router-link-exact-active： 用于设置二级路由的高亮效果
          router-link-active： 用于设置一级路由的高亮效果
       -->
      <router-link to="/Find">发现音乐</router-link> |
      <router-link to="/My">我的音乐</router-link>
    </div>
    <!-- 7、设置挂载点 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.router-link-active{
  color: red;
  background-color: blue;
}
</style>